<template>
    <view class="wai">
        <view class="cen">
            <view class="cen_title">
				<view class="title">
				    <view>进件信息</view>
				    <view class="title-flex">
				        <view class="chakan">
							<picker cancel="" mode="date" :value="dateMonth" fields="month" @change="bindDateChange">
								<view class="datebox">
									<view class="text">{{dateMonth}}</view>
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
            <view class="jinjian">
                <view class="jinjian1">
                    <view class="jiannum">{{ sectionProfit.order_count }}</view>
                    <view class="">部门进件</view>
                </view>
                <view class="jinjian1">
                    <view class="jiannum">{{ groupProfit.order_count }}</view>
                    <view class="">团队进件</view>
                </view>
            </view>
			<view class="jinjian">
			    <view class="jinjian1">
			        <view class="jiannum">{{ teamProfit.order_count }}</view>
			        <view class="">小组进件</view>
			    </view>
			    <view class="jinjian1">
			        <view class="jiannum">{{ monthData.order_count }}</view>
			        <view class="">个人进件</view>
			    </view>
			</view>
        </view>
        <view class="cen cen1">
            <view class="title">
                <view>店铺业绩信息</view>
                <view class="title-flex">
                </view>
            </view>
            <view class="jinjian">
                <view class="jinjian1">
                    <view class="jiannum">{{ sectionProfit.profit}}</view>
                    <view class="">部门业绩</view>
                </view>
                <view class="jinjian1">
                    <view class="jiannum">{{ groupProfit.profit }}</view>
                    <view class="">团队业绩</view>
                </view>
            </view>
			<view class="jinjian">
			    <view class="jinjian1">
			        <view class="jiannum">{{ teamProfit.profit}}</view>
			        <view class="">小组业绩</view>
			    </view>
			    <view class="jinjian1">
			        <view class="jiannum">{{ monthData.profit }}</view>
			        <view class="">个人业绩</view>
			    </view>
			</view>
        </view>
        <!-- 历史趋势 -->
        <view class="lishi">
            <view class="lishi1">历史业绩趋势</view>
            <canvas
                canvas-id="bwrAvTqHshAAtpvzHkmFEyMKhBgYhhqh"
                id="bwrAvTqHshAAtpvzHkmFEyMKhBgYhhqh"
                type="2d"
                class="charts"
                @touchstart="touchstart"
                @touchmove="touchmove"
                @touchend="touchend"
            />
        </view>
    </view>
</template>

<script>
import uCharts from '@qiun/ucharts/u-charts';
import { agentht,shopNum,getProfit} from '@/api/index.js';
import { utils } from '@/utils/utils.js';
var uChartsInstance = {};
export default {
    data() {
        return {
            cWidth: 686,
            cHeight: 500,
            pixelRatio: 2,
            dianpu: {
			}, //店铺数据
			agent:{
				dept:{
					mergename:""
				}
			},
			monthData:0,
            sectionProfit:0,
			teamProfit:0,
			groupProfit:0,
			shopNumber:0,
			dateMonth:''
        };
    },
    onReady() {
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
        this.navBarTop = menuButtonInfo.top;
        this.cWidth = uni.upx2px(686);
        this.cHeight = uni.upx2px(500);
        this.pixelRatio = uni.getSystemInfoSync().pixelRatio;

		this.getShopNum();
		this.getMonth()
    },
    methods: {
		getMonth(){
			let date = new Date();
			let month = date.getMonth() + 1;
			let year = date.getFullYear()
			let lastDay = new Date(year, month, 0).getDate();
			this.dateMonth = `${year}年${month}月`
			this.selMonth = `${year}-${month}`
			this.getServerData();
			
		},
		//选择月份
		bindDateChange(e){
			let d = e.detail.value.split('-')
			this.dateMonth = `${d[0]}年${d[1]}月`
			let lastDay = new Date(d[0], d[1], 0).getDate();
			this.selMonth = `${d[0]}-${d[1]}`
			this.getServerData();
		},
        // 获取店铺数据
        async getServerData() {
            const ret = await getProfit(this.selMonth);
            if (ret.code == 1) {
				this.sectionProfit = ret.data.sectionProfit
				this.teamProfit = ret.data.teamProfit
				this.groupProfit = ret.data.groupProfit
				this.monthData = ret.data.monthData
                this.drawCharts('bwrAvTqHshAAtpvzHkmFEyMKhBgYhhqh', ret.data);
            } else {
                utils();
            }
        },
		goShopDetails(){
			console.log(1)
			uni.navigateTo({
				url:'/pages/sub/shangwuShop/shangwuShop'
			})
		},
		async getShopNum(){
			const ret = await shopNum();
			if (ret.code == 1) {
			  console.log(ret.data)
			  this.shopNumber = ret.data.length
			    // this.drawCharts('bwrAvTqHshAAtpvzHkmFEyMKhBgYhhqh', ret.data);
			} else {
			    utils();
			}
		},
        drawCharts(id, data) {
			// console.log(data)
            const query = uni.createSelectorQuery().in(this);
            query
                .select('#' + id)
                .fields({ node: true, size: true })
                .exec((res) => {
                    if (res[0]) {
                        const canvas = res[0].node;
                        const ctx = canvas.getContext('2d');
                        canvas.width = res[0].width * this.pixelRatio;
                        canvas.height = res[0].height * this.pixelRatio;
                        uChartsInstance[id] = new uCharts({
                            type: 'line',
                            context: ctx,
                            width: this.cWidth * this.pixelRatio,
                            height: this.cHeight * this.pixelRatio,
                            categories: data.lineData.categories,
                            series: data.lineData.series,
                            pixelRatio: this.pixelRatio,
                            animation: true,
                            background: '#FFFFFF',
                            color: ['#FF9B29', '#61D6D4'],
                            padding: [15, 10, 0, 15],
                            enableScroll: true,
                            legend: {},
                            xAxis: {
                                disableGrid: true,
                                scrollShow: true,
                                itemCount: 10
                            },
                            yAxis: {
                                gridType: 'dash',
                                dashLength: 2
                            },
                            extra: {
                                line: {
                                    type: 'straight',
                                    width: 2,
                                    activeType: 'hollow'
                                }
                            }
                        });
                    } else {
                        console.error('[uCharts]: 未获取到 context');
                    }
                });
        },
        touchstart(e) {
            uChartsInstance[e.target.id].scrollStart(e);
        },
        touchmove(e) {
            uChartsInstance[e.target.id].scroll(e);
        },
        touchend(e) {
            uChartsInstance[e.target.id].scrollEnd(e);
            uChartsInstance[e.target.id].touchLegend(e);
            uChartsInstance[e.target.id].showToolTip(e);
        },
        gotop() {
            uni.navigateBack();
        }
    }
};
</script>

<style lang="scss" scoped>


.charts {
    width: 686rpx;
    height: 500rpx;
}
.wai {
    // 历史趋势
    .lishi {
        .lishi1 {
            padding: 40rpx 32rpx;
        }
        background-color: #fff;
        width: 686rpx;
        margin: auto;
    }
    // 商家信息
    .cen1 {
        .title {
            .title-flex {
                .chakan {
                    color: #ff9b29;
                }
                display: flex;
                align-items: center;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        margin: 20rpx auto !important;
    }
    .cen {
		.title {
		    .title-flex {
		        .chakan {
		            color: #ff9b29;
		        }
		        display: flex;
		        align-items: center;
		    }
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		}
        .jinjian {
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 58rpx;
            .jinjian1 {
                .jiannum {
                    margin-bottom: 22rpx;
                    font-weight: 700;
                    color: #ff9b29;
                    font-size: 48rpx;
                }
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #999999;
            }
        }
        padding: 40rpx 32rpx 44rpx 32rpx;
        margin: 20rpx auto 0 auto;
        width: 686rpx;
        background: #ffffff;
        border-radius: 20rpx;
    }
    .bgi-img {
        position: relative;
        .yue1 {
            position: absolute;
            color: #fff;
            border-radius: 30rpx;
            right: 54rpx;
            bottom: 28rpx;
            font-size: 24rpx;
            background: #ff9b29;
            padding: 4rpx 14rpx 2rpx;
        }
        .flex1 {
            .price1 {
                color: #333333;
                font-size: 48rpx;
                font-weight: 700;
                margin-bottom: 22rpx;
            }
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            left: 82rpx;
            bottom: -82rpx;
            color: #999999;
            font-size: 28rpx;
        }
        .felx2 {
            left: 378rpx;
        }
        .bgi2 {
            position: absolute;
            left: 32rpx;
            bottom: -122rpx;
            width: 686rpx;
            height: 212rpx;
        }

        .bumen {
            position: absolute;
            left: 190rpx;
            bottom: 154rpx;
            font-size: 36rpx;
            color: #fff;
        }
		.gonghao {
		    position: absolute;
		    left: 190rpx;
		    bottom: 120rpx;
		    font-size: 36rpx;
		    color: #fff;
		}
		.zhiwei {
		    position: absolute;
		    left: 190rpx;
		    bottom: 120rpx;
		    font-size: 36rpx;
		    color: #fff;
		}
		.shopname {
		    position: absolute;
		    left: 190rpx;
		    bottom: 194rpx;
		    font-size: 36rpx;
		    color: #fff;
		}
        .toux {
            width: 108rpx;
            height: 108rpx;
            border-radius: 50%;
            position: absolute;
            left: 50rpx;
            bottom: 126rpx;
        }
        .top-h {
            position: absolute;
            left: 300rpx;
            color: #fff;
        }
        .jure {
            position: absolute;
            left: 24rpx;
            width: 44rpx;
            height: 60rpx;
        }
        .imga {
            height: 442rpx;
            width: 100vw;
        }
    }
    min-height: 100vh;
    background-color: #eee;
    padding-bottom: 100rpx;
	position: relative;
	box-sizing: border-box;
	padding: 20rpx 0 0 0;
}
</style>
